//
import { useRef, useEffect } from "react"

import createXYChart3D from "../../../utils/createXYChart3D"

const WeakManagement = ({ weakLinksBarChart = {}, weakLinkDetails = [] }) => {
  const chartRef = useRef(null)
  const myChart = useRef(null)
  useEffect(() => {
    if (!myChart.current) {
      createXYChart3D(chartRef, myChart, weakLinksBarChart)
    }
  }, [weakLinksBarChart])

  // 一
  const chartRef1 = useRef(null)
  const myChart1 = useRef(null)
  useEffect(() => {
    if (chartRef1.current) {
      if (!myChart1.current) {
        createXYChart3D(chartRef1, myChart1, weakLinkDetails[0])
      }
    }
  }, [weakLinkDetails])

  // 二
  const chartRef2 = useRef(null)
  const myChart2 = useRef(null)
  useEffect(() => {
    if (chartRef2.current) {
      if (!myChart2.current) {
        createXYChart3D(chartRef2, myChart2, weakLinkDetails[1])
      }
    }
  }, [weakLinkDetails])

  // 三
  const chartRef3 = useRef(null)
  const myChart3 = useRef(null)
  useEffect(() => {
    if (chartRef3.current) {
      if (!myChart3.current) {
        createXYChart3D(chartRef3, myChart3, weakLinkDetails[2])
      }
    }
  }, [weakLinkDetails])

  return (
    <>
      {/* 管理薄弱图表 */}
      <div className="text-[14px] h-[263px] mt-[15px] border-1 border-white rounded-[8px] pl-[24px] pr-[18px] pt-[20px] pb-[36px]">
        <div className=" flex items-center justify-between">
          <div
            className="w-[365px] h-[36px] leading-[36px] "
            style={{
              backgroundImage: `url('assistant-decision/base-title_bg.png')`,
              backgroundRepeat: "no-repeat",
              backgroundSize: "cover"
            }}
          >
            <span className="ml-[30px] text-white text-[16px] font-[600]">
              管理薄弱
            </span>
          </div>
          <div className="flex items-center">
            <div
              className="w-[20px] h-[20px] ml-[12px]"
              style={{
                backgroundImage: `url('assistant-decision/think_icon.png')`
              }}
            ></div>
            <div className="text-[#008BFF]">展开思考过程</div>
          </div>
        </div>
        {/* 图表 */}
        <div ref={chartRef} className="w-full h-[220px]"></div>
      </div>
      <div
        className="h-[82px] flex items-center mt-[24px] pl-[10px] pr-[10px]"
        style={{
          backgroundImage: `url('assistant-decision/weak-desc_bg.png')`,
          backgroundSize: "contain"
        }}
      >
        <div
          className="w-[30px] h-[20px] mr-[20px]"
          style={{
            backgroundImage: `url('assistant-decision/notice_icon.png')`
          }}
        ></div>
        <div>
          在<span>物资配送管理</span>
          方面方面发现经济红线、企业负责人业绩考核和安全考核扣分问题，在
          <span>物资配送管理</span>方面等方面发现较为严重问题，
          <span>物资配送管理</span>方面等方面管理存在薄弱环节
        </div>
      </div>
      <div
        className="h-[54px] flex items-center mt-[16px] pl-[10px] pr-[10px]"
        style={{
          backgroundImage: `url('assistant-decision/weak-desc_bg.png')`,
          backgroundSize: "contain"
        }}
      >
        <div
          className="w-[20px] h-[20px] mr-[20px]"
          style={{
            backgroundImage: `url('assistant-decision/notice_icon.png')`
          }}
        ></div>
        <div>
          未发现经济红线、企业负责人业绩考核和安全考核扣分问题，未发现严重问题
        </div>
      </div>
      {/* 管理薄弱环节 */}
      <div
        className="mt-[16px] w-[169px] h-[32px] text-white text-center leading-[32px]"
        style={{
          backgroundImage: `url('assistant-decision/base-business-title_bg.png')`,
          backgroundRepeat: "no-repeat"
        }}
      >
        <span>薄弱环节</span>
      </div>
      {/* 一 */}
      <div>
        {/* 标题 */}
        <div
          className="h-[61px] flex items-center justify-between mt-[12px] p-[12px]"
          style={{
            backgroundImage: `url('assistant-decision/weak-desc_bg.png')`,
            backgroundSize: "contain",
            backgroundPosition: "50%"
          }}
        >
          <div
            className="flex-none w-[20px] h-[20px] mr-[20px]"
            style={{
              backgroundImage: `url('assistant-decision/notice_icon.png')`
            }}
          ></div>
          <div className="flex-1">（一）物资及采购管理-采购方式</div>
        </div>
        {/* 图表 */}
        <div ref={chartRef1} className="w-full h-[220px]"></div>
      </div>
      {/* 二 */}
      <div>
        {/* 标题 */}
        <div
          className="h-[61px] flex items-center justify-between mt-[12px] p-[12px]"
          style={{
            backgroundImage: `url('assistant-decision/weak-desc_bg.png')`,
            backgroundSize: "contain",
            backgroundPosition: "50%"
          }}
        >
          <div
            className="flex-none w-[20px] h-[20px] mr-[20px]"
            style={{
              backgroundImage: `url('assistant-decision/notice_icon.png')`
            }}
          ></div>
          <div className="flex-1">（二）物资及采购管理-采购程序</div>
        </div>
        {/* 图表 */}
        <div ref={chartRef2} className="w-full h-[220px]"></div>
      </div>
      {/* 三 */}
      <div>
        {/* 标题 */}
        <div
          className="h-[61px] flex items-center justify-between mt-[12px] p-[12px]"
          style={{
            backgroundImage: `url('assistant-decision/weak-desc_bg.png')`,
            backgroundSize: "contain",
            backgroundPosition: "50%"
          }}
        >
          <div
            className="flex-none w-[20px] h-[20px] mr-[20px]"
            style={{
              backgroundImage: `url('assistant-decision/notice_icon.png')`
            }}
          ></div>
          <div className="flex-1">（三）物资及采购管理-实物库存</div>
        </div>
        {/* 图表 */}
        <div ref={chartRef3} className="w-full h-[220px]"></div>
      </div>
    </>
  )
}

export default WeakManagement
